<template>
    <div class="container added">
        <el-form :model="ruleForm" ref="ruleForm" :rules="rules" :label-position="labelPosition" label-width="120px"
                 class="demo-ruleForm">
            <div class="container">
                <el-steps :active="active" process-status="success" finish-status="wait" simple style="margin-top: 20px">
                    <el-step title="① 选择原料" icon=" "></el-step>
                    <el-step title="② 加工" icon=" "></el-step>
                    <el-step title="③ 成品信息" icon=" "></el-step>
                </el-steps>

            </div>
            <div class="conntainer"  v-if="this.active == 0">
                <el-row class="container" style="margin-top:20px;">
                    <el-table :data="tableData" border style="margin-top:20px;" ref="multipleTable"
                              header-cell-class-name="table-header"
                              :header-cell-style="{ background: 'rgba(8,185,94,0.08)', color: '#08B95E' }">
                        <el-table-column prop="breedName" sortable label="品名"></el-table-column>
                        <el-table-column prop="batch" sortable label="批号 "></el-table-column>
                        <el-table-column prop="source" sortable label="来源"></el-table-column>
                        <el-table-column prop="place" sortable label="地块/供应商"></el-table-column>
                        <el-table-column prop="number" sortable label="数量">
                            <template slot-scope="scope">
                                <el-input v-model="scope.row.number" style="width:100px;"></el-input>
                                <span style="margin-left:10px;">{{ scope.row.units }}</span>

                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                    <div @click="addManure" class="addManure">+ 添加原料</div>
                </el-row>
            </div>
            <div class="container" v-if="this.active == 1" style="margin-top:20px;">
                <el-form-item label="选择工艺工序：">
                    <el-select v-model="productName" @change="getflow" value-key="id" filterable placeholder="请选择"
                               style="width: 300px;">
                        <el-option v-for="item in processList" :key="item.id" :label="item.name" :value="item">
                            {{ item.name }}
                        </el-option>
                    </el-select>
                </el-form-item>
            </div>

            <div class="container" style="margin-top:20px;overflow: auto" v-if="this.active == 1">
                <h3>工艺工序</h3>
                <div style="height:550px;margin-top:20px;">
                    <el-col :span="7">
                        <el-steps direction="vertical" :active="activeTechnologies">
                            <el-step v-for="(item, index) in technologies" :key="index" :title="item.methodName"
                                     @click.native="switchTable(index)"></el-step>

                        </el-steps>
                    </el-col>
                    <el-col :span="14" v-for="(item, index) in technologyList" :key="index"
                            v-if="switchTableIndex == index">
                        <el-form-item label="开始时间：">
                            <el-date-picker  v-model="item.beginTime" type="date" @change="gettime" value-format="yyyy-MM-dd"
                                            placeholder style="width:300px"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间：">
                            <el-date-picker  v-model="item.endTime" type="date" @change="gettime" value-format="yyyy-MM-dd"
                                            placeholder style="width:300px"></el-date-picker>
                        </el-form-item>
                        <el-form-item  label="视频监控：">
                            <el-select disabled v-model="item.equipmentName" value-key="id" placeholder="请选择"
                                       @change="getfacilityDetails" style="width:300px">
                                <el-option v-for="item in facilityList" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="负责人：">
                            <el-select  v-model="item.userName" @change="getuser" value-key="id" placeholder="请选择"
                                       style="width:300px">
                                <el-option v-for="item in user_findByAll" :key="item.id" :label="item.name" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="操作照片：">
                            <div @click="handelsuccess(index)">
                                <el-upload class="upload-poster" action="https://jsonplaceholder.typicode.com/posts/"
                                           :show-file-list="false" :on-change="imgPreview" :auto-upload="false">
                                    <img v-if="showImg" :src="showImg" class="avatar" />
                                    <i v-else class="el-icon-circle-plus avatar-uploader-icon"></i>
                                    <div style="color: #1BC46D;">jpg、png、gif格式，60x60像素，不超过2MB</div>
                                </el-upload>
                            </div>
                        </el-form-item>
                        <el-form-item v-if='item.remark' label='备注：'>
                            <el-input disabled type='textarea' v-model='ruleForm.remark' :rows='4' style='width: 300px'></el-input>
                        </el-form-item>
                        <el-form-item v-else label='备注：'>
                            <el-input disabled type='textarea' v-model='ruleForm.remark' :rows='4' style='width: 300px'></el-input>
                        </el-form-item>
                    </el-col>
                </div>
            </div>

            <div class="conntainer" v-if="this.active == 2">
                <el-row class="container" style="margin-top:20px;">
                    <el-table :data="finishedProductList" border style="margin-top:20px;" ref="multipleTable"
                              header-cell-class-name="table-header" :header-cell-style="{ background:'rgba(64, 158, 255, 0.05)'}">
                        <!-- <el-table-column prop="productName" sortable label="品名རྫས་མིང་"> -->
                        <el-table-column prop="productName" sortable label="品名་">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.productNames"
                                           @change="getname(scope.$index, scope.row.productNames)" value-key="breedId" filterable
                                           placeholder="请选择">
                                    <el-option v-for="item in tableData" :key="item.breedId" :label="item.breedName"
                                               :value="item">
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="batch" sortable label="加工批号">
                            <template slot-scope="scope">
                                <div>
                                    <el-input placeholder="请输入内容" v-model="scope.row.batch">

                                    </el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="grade" sortable label="品级 ">
                            <template slot-scope="scope">
                                <el-select v-model="scope.row.grade" value-key="name" filterable placeholder="请选择">
                                    <el-option v-for="item in pj" :key="item.name" :label="item.name" :value="item.name">
                                        {{ item.name }}
                                    </el-option>
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column prop="totalNumber" sortable label="成品数量">
                            <template slot-scope="scope">
                                <div>
                                    <el-input placeholder="请输入内容" v-model="scope.row.totalNumber" style="width:200px;">
                                        <template slot="append">
                                            <el-select v-model="scope.row.units" value-key="id" filterable placeholder="请选择"
                                                       style="width: 100px">
                                                <el-option v-for="item in unitslist" :key="item.id" :label="item.name"
                                                           :value="item.name">
                                                    {{ item.name }}
                                                </el-option>
                                            </el-select>
                                        </template>
                                    </el-input>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="title" sortable label="关联产品介绍">
                            <template slot-scope="scope">
                                <div>
                                    <el-input placeholder="请输入内容" v-model="scope.row.title"
                                              @click.native="relevance(scope.$index, scope.row)">

                                    </el-input>
                                </div>
                            </template>
                        </el-table-column>

                        <el-table-column label="加工时间" width='150' align="center">
                            <template slot-scope="scope">
                                <el-date-picker
                                    style='width: 100%'
                                    value-format='yyyy-MM-dd'
                                    v-model="scope.row.time"
                                    type="date"
                                    placeholder="选择日期时间">
                                </el-date-picker>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="150" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" @click="handleCheck(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-row>
            </div>



            <el-form-item class="footerFixed" label-width="0px">
                <div class='fixed'>
                    <el-button @click="prev" v-if="active == 1"  plain>返回</el-button>
                    <el-button @click="prev" v-if="active == 1 || active == 2" class='theme-button'>上一步</el-button>
                    <el-button class='theme-button' @click="next" v-if="active == 0 || active == 1">下一步</el-button>
                    <el-button v-if="active == 2" class='theme-button' @click="submitrule('ruleForm')">提交</el-button>
                </div>
            </el-form-item>
        </el-form>
        <el-dialog title="选择原料" :visible.sync="dialogTableVisible" :modal='false'>
            <el-form>
                <el-row :span="24">
                    <el-col :span="8">
                        <el-form-item label="来源：">
                            <el-select v-model="source" placeholder="请选择" style="width:auto;" @change="get">
                                <el-option label="基地采收" value="基地采收"></el-option>
                                <el-option label="采购入库" value="采购入库"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="品名：">
                            <el-select v-model="reapName" placeholder="请选择" @change="breednameSearch">
                                <el-option v-for="item in breedNameList" :key="item" :label="item" :value="item">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-table v-if="ifshow" :data="materialList" border style="margin-top:20px;" ref="multipleTable"
                      header-cell-class-name="table-header">
                <el-table-column prop="reapName" sortable label="品名་"></el-table-column>
                <el-table-column v-if="source == '基地采收'" prop="soilName" sortable label="所属地块"></el-table-column>
                <el-table-column v-else prop="phone" sortable label="供应商་"></el-table-column>
                <el-table-column prop="batch" sortable label="批号"></el-table-column>
                <el-table-column prop="surplusNumber" sortable label="可用数量">
                    <template slot-scope="scope">
                        {{ scope.row.surplusNumber }}{{ scope.row.units }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleSelect(scope.$index, scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-table v-if="ifshow1" :data="materialList" border style="margin-top:20px;" ref="multipleTable"
                      header-cell-class-name="table-header">
                <el-table-column prop="productName" sortable label="品名"></el-table-column>
                <el-table-column v-if="source == '基地采收'" prop="soilName" sortable label="所属地块"></el-table-column>
                <el-table-column v-else prop="supplierName" sortable label="供应商"></el-table-column>
                <el-table-column prop="batch" sortable label="批号"></el-table-column>
                <el-table-column prop="surplus" sortable label="可用数量">
                    <template slot-scope="scope">
                        {{ scope.row.subtotal }}{{ scope.row.unit }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleSelect(scope.$index, scope.row)">选择</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage"
                           :total="total" @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
        </el-dialog>

        <el-dialog title="选择产品介绍" :visible.sync="dialogTableVisible1" :modal='false'>
            <el-table :data="tableData1" border style="margin-top:20px;" ref="multipleTable"
                      header-cell-class-name="table-header">
                <el-table-column prop="img" sortable label="产品图">
                    <template slot-scope="scope">
                        <img :src="$store.state.imageUrls + scope.row.img" alt="" style="width:50px; height:50px;"
                             v-if="scope.row.img != '' || scope.row.img != null">
                    </template>
                </el-table-column>
                <el-table-column prop="title" sortable label="产品标题"></el-table-column>
                <el-table-column prop="relatedProducts" sortable label="关联产品"></el-table-column>
                <el-table-column prop="quality" sortable label="保质期"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleSelectProductDetails(scope.$index, scope.row)">选择</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage1"
                           @current-change="handleCurrentChange1" :total="total1" style="margin-top:20px"></el-pagination>

        </el-dialog>
    </div>
</template>

<script>
import {
    user_findByAll,
    technology_findByAll,
    technology_findById,
    reapdetail_findByList,
    reapDetail_findAllBreed,
    facility_findByAll,
    base_findByAll,
    products_findByAll,
    products_findByList,
    process_save,
    storage_findByList,
    unit_findByList,
    updateRecoveryLabor, updatePlantLabor, getPlantLaborList, process_findById, editProcess
} from '@/request/api';
import axios from 'axios';
import { mapState } from 'vuex';
export default {
    props:['processId'],
    data() {
        return {
            hasFile:false,
            unitslist: [],
            ifshow: true,
            ifshow1: false,
            pj: [
                { name: '一级' },
                { name: '二级' },
                { name: '三级' }
            ],
            finishedProductList: [],
            dialogTableVisible1: false,
            activeTechnologies: 0,
            breedNameList: [],
            materialList: [],
            reapName: '',
            soilName: '',
            technologies: [],
            processList: [],
            res: {
                images: []
            },
            productName: '',
            headImg: [],
            showImg:'',
            tableData: [],
            source: "基地采收",
            dialogTableVisible: false,
            total: 0,
            currentPage: 1,
            currentPage1: 1,
            total1: 1,
            tableData1: [],
            pagesize: 10,
            active: 0,
            rules: {},
            ruleForm: {},
            labelPosition: "right",
            switchTableIndex: 0,
            technologyList: [

            ],
            facilityList: [],
            technologyId: '',
            methodName: '',
            methodId: '',
            index: '',
            xindex: '',
            user_findByAll: [],

            //查出来的工艺工序
            oldTechnologyList:[],
            oldFinishedProductList:[],
        }
    },
    mounted() {
        this.init()
        this.selectMaterial()
        this.selectBreedName()
        this.getfacility()
        this.getSelectBase()
        this.getProductDetails()
        this.getuser_findByAll()
        this.getunits()
        console.log(this.ifshow)
        this.getData()
    },
    computed:{
        ...mapState(['imageUrls'])
    },
    methods: {
        //根据id查询当前数据回填
        async getData(){
            const res = await process_findById(this.processId)
            if(res.code == 200){
                this.tableData = res.data.materialList
                this.productName = res.data.detailList[0].technology
                this.oldTechnologyList = res.data.technologyList
                this.oldFinishedProductList = res.data.detailList
                this.oldFinishedProductList = this.oldFinishedProductList.map(item=>{
                    return {
                        ...item,
                        productNames:item.productName
                    }
                })
                console.log(this.processList);
                // this.getflow(this.processList.find(item=>item.name == this.productName))
                this.technologyList = this.oldTechnologyList
                this.technologies = this.technologyList
                this.technologies.forEach((item,index)=>{
                    item.processImg = this.imageUrls+item.processImg
                })
                this.finishedProductList = this.oldFinishedProductList
                console.log(this.finishedProductList,'$$$');
                this.switchTable(0)
            }

        },
        async importExcel(file){
            this.ruleForm.file = file.raw
            this.$notify({
                title: '操作成功',
                message: '导入成功',
                type: 'success'
            })
            this.hasFile = true
        },
        //下载导入模板
        //type (1=农事用工, 2=种植用工, 3=加工用工, 4=采收用工)
        async downloadTemplate() {
            this.downloadFile('labor/exportLaborTemplate?type=3','加工用工导入模板')
        },
        //下载xlsx文件
        downloadFile(url,fileName){
            //由于之前的前端没有封装导入模板接口，所以只能用axios
            axios.get(localStorage.getItem('requestUrl')+url,{responseType:'arraybuffer'}).then(res=>{
                const blob = new Blob([res.data],{type:'application/vnd.ms-excel'})
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement('a')
                link.style.display = 'none'
                link.href = url
                link.setAttribute('download',`${fileName}.xlsx`)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
                window.URL.revokeObjectURL(url)
                this.$notify({
                    title: '操作成功',
                    message: '下载成功',
                    type: 'success'
                })
            })
        },


        handleClick(params){
            console.log(params);
            this.dialogTableVisibleWorker = true
            this.dialogTitle = params.workBatch
        },
        getunits() {
            unit_findByList('').then((res) => {
                this.unitslist = res.data;
            });
        },
        getname(index, ele) {
            this.finishedProductList[index].productName = ele.breedName
            // console.log(this.finishedProductList[index].productName)
        },
        //删除成品
        handleCheck() {
            this.finishedProductList.pop()
        },
        //添加成品
        addProduct() {
            // var d = new Date();
            // var curr_date = d.getDate();
            // var curr_month = d.getMonth() + 1;
            // var curr_year = d.getFullYear();
            // String(curr_month).length < 2 ? (curr_month = "0" + curr_month) : curr_month;
            // String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date;
            // var yyyyMMdd = curr_year + "" + curr_month + "" + curr_date;
            // this.ruleForm.reapBatch = yyyyMMdd + Math.ceil(Math.random()*10000);
            // this.reapBatch = this.ruleForm.reapBatch
            // for(var i=0;i<this.tableData.length;i++){
            // this.finishedProductList.push({
            // 	technologyId: this.technologyId,
            // 	technology: this.technology,
            // 	productName: "",
            // 	batch: yyyyMMdd + Math.ceil(Math.random() * 10000),
            // 	grade: '',
            // 	totalNumber: '',
            // 	surplusNumber: '',
            // 	units: "",
            // 	productId: '',
            // 	title: '',
            // })
        },


        gettime() {
            // var oDate1 = new Date(this.ruleForm.producedTime)
            // var oDate2 = new Date(this.ruleForm.buyTime)
            if (this.beginTime != '' && this.endTime != '') {
                var oDate1 = new Date(this.technologyList[0].beginTime);
                var oDate2 = new Date(this.technologyList[0].endTime);
                if (oDate1 > oDate2) {
                    this.$notify({
                        title: '提示',
                        message: '开始时间不得早于结束时间',
                        type: 'info'
                    });
                    this.technologyList[0].beginTime = '';
                    this.technologyList[0].endTime = '';
                }
            }
        },
        // 计算 成品数量
        count(index, row) {
            if (Number(this.tableData[index].number) < Number(this.finishedProductList[index].totalNumber)) {
                this.$notify({
                    title: '提示',
                    message: '成品总量不等大于投入总量',
                    type: 'info',
                    duration: 1000
                });
                this.finishedProductList[index].totalNumber = ""
            }
        },
        // 获取 选择 产品介绍 的列表
        getProductDetails() {
            let data = {
                page: this.currentPage1
            }
            products_findByList(data).then((res) => {
                this.tableData1 = res.rows
                this.total1 = res.total
            })
        },

        // 获取地块下拉   有问题 待修改
        getSelectBase() {
            base_findByAll("").then((res) => {

            })
        },
        //获取 图片的 index
        handelsuccess(index) {
            this.index = index
        },
        // 获取设备名和id
        getfacilityDetails(ele) {
            this.technologyList[this.switchTableIndex].equipmentName = ele.name
            this.technologyList[this.switchTableIndex].equipmentId = ele.id
        },
        getuser(ele) {
            this.technologyList[this.switchTableIndex].userName = ele.name
            this.technologyList[this.switchTableIndex].userId = ele.id
        },
        // 获取设备下拉
        getfacility() {
            facility_findByAll("").then((res) => {
                this.facilityList = res.data
            })
        },
        // 获取负责人下拉列表
        getuser_findByAll() {
            user_findByAll("").then((res) => {
                this.user_findByAll = res.data
            })
        },
        // 点击切换工艺的步骤
        switchTable(index) {
            this.switchTableIndex = index
            this.activeTechnologies = index
            console.info(this.switchTableIndex,index)
			this.technologyList[index].methodName = this.technologies[index].methodName
			this.technologyList[index].methodId = this.technologies[index].id
			this.showImg = this.technologyList[index].processImg
			console.info(this.technologyList)
        },
        // 采购入库
        selectPurchase() {
            let data = {
                page: this.currentPage,
                source: '采购入库'
            }
            storage_findByList(data).then((res) => {
                this.materialList = res.rows
                this.total = res.total
                for (var i = 0; i < this.materialList.length; i++) {

                    var st = this.materialList[i].unit.substr(this.materialList[i].unit.lastIndexOf('/', this.materialList[i].unit.lastIndexOf('/') - 1) + 1);
                    var str = st.lastIndexOf("\/")
                    this.materialList[i].units = st.substring(0, str)
                }
            })
        },
        // 判断是采购入库 还是 基地采收
        get(ele) {
            this.reapName = ""
            this.soilName = ""
            this.currentPage = 1
            if (ele == "基地采收") {
                this.selectMaterial()
                this.ifshow = true
                this.ifshow1 = false
            } else {
                this.selectPurchase()
                this.ifshow = false
                this.ifshow1 = true
            }
        },
        // 删除选择的原料
        handleDel(index, row) {
            this.tableData.splice(index, 1)
        },
        //  获得工艺具体的步骤
        getflow(ele) {
            var id = ele.id
            this.technologyId = ele.id
            this.technology = ele.name
            this.technologyList = []
            technology_findById(id).then((res) => {
                var name = localStorage.getItem("ms_username")
                var id = localStorage.getItem("ms_id")
                this.technologies = res.data.technologies
                for (var i = 0; i < this.technologies.length; i++) {
                    this.technologyList.push({
                        technologyId: this.technologyId,
                        methodId: "",
                        methodName: "",
                        beginTime: '',
                        endTime: '',
                        userId: id,
                        userName: '',
                        equipmentId: '',
                        equipmentName: '',
                        processImg: '',
                        processImgs: '',
                        files: ''
                    })
                }
                this.technologyList[0].methodName = this.technologies[0].standards
                this.technologyList[0].methodId = this.technologies[0].id
            })
        },
        // 工艺列表
        init() {
            technology_findByAll("").then((res) => {
                this.processList = res.data
            })

        },

        // 当选择基地采收时的   原料列表
        selectMaterial() {
            let data = {
                page: this.currentPage,
                reapName: this.reapName,
                soilName: this.soilName
            }
            reapdetail_findByList(data).then((res) => {
                this.materialList = res.rows
                this.total = res.total
            })
        },
        //选择原料时  品名的下拉
        selectBreedName() {
            reapDetail_findAllBreed("").then((res) => {
                this.breedNameList = res.data
            })

        },
        //根据品名 进行搜索
        breednameSearch(ele) {
            this.reapName = ele
            this.selectMaterial()
        },
        // 选择原料
        handleSelect(index, row) {
            if (this.source == "基地采收") {
                this.tableData.push({
                    breedId: row.id,
                    breedName: row.reapName,
                    batch: row.batch,
                    source: this.source,
                    type: this.source,
                    place: row.soilName,
                    number: row.surplusNumber,
                    units: row.units,
                    id: row.reapId
                })
                this.dialogTableVisible = false
            } else {
                this.tableData.push({
                    breedId: row.id,
                    source: this.source,
                    type: this.source,
                    breedName: row.productName,
                    number: row.subtotal,
                    units: row.units,
                    place: row.supplierName,
                    batch: row.batch
                })
                this.dialogTableVisible = false
            }

        },
        // 选择 产品介绍 添加到列表中
        handleSelectProductDetails(index, row) {
            this.finishedProductList[this.xindex].productImg = row.img
            this.finishedProductList[this.xindex].productId = row.id
            this.finishedProductList[this.xindex].title = row.title
            this.dialogTableVisible1 = false
        },
        //上传图片
        imgPreview(file, fileList) {
            this.technologyList[this.index].processImgs = URL.createObjectURL(file.raw);
            this.headImg[this.index] = URL.createObjectURL(file.raw);
			this.showImg = this.headImg[this.index]
            let fileName = file.name;
            let regex = /(.jpg|.gif|.png|.jpeg)$/;
            if (regex.test(fileName.toLowerCase())) {
                this.technologyList[this.index].files = file.raw
                this.technologyList[this.index].processImg = file.name
            } else {
                this.$message.error('请选择图片文件');
            }

        },
        // 点击  添加  打开弹窗
        addProductDetails() {

        },

        // 点击 添加原料打开弹窗
        addManure() {
            this.dialogTableVisible = true
        },
        relevance(index, row) {
            this.xindex = index
            this.dialogTableVisible1 = true
        },
        // 点击下一步时 判断 原料是否为空   工艺是否为空
        next() {
            console.log(this.active);
            if (this.active == 0) {
                if (this.tableData == "" || this.tableData == null || this.tableData == undefined) {
                    this.$notify({
                        title: '提示',
                        message: '原料不能为空',
                        type: 'info',
                        duration: 1000
                    });
                } else {
                    var arr = 0
                    for (var i = 0; i < this.tableData.length; i++) {
                        arr = arr + Number(this.tableData[i].number)
                    }
                    this.number = arr
                    this.nextStep()
                }

            } else if (this.active == 1) {
                if (this.productName == "") {
                    this.$notify({
                        title: '提示',
                        message: '工艺不能为空',
                        type: 'info',
                        duration: 1000
                    });
                    // this.dialogTableVisible1 = false
                } else {
                    var d = new Date();
                    var curr_date = d.getDate();
                    var curr_month = d.getMonth() + 1;
                    var curr_year = d.getFullYear();
                    String(curr_month).length < 2 ? (curr_month = "0" + curr_month) : curr_month;
                    String(curr_date).length < 2 ? (curr_date = "0" + curr_date) : curr_date;
                    var yyyyMMdd = curr_year + "" + curr_month + "" + curr_date;
                    // this.ruleForm.reapBatch = yyyyMMdd + Math.ceil(Math.random()*10000);
                    // this.reapBatch = this.ruleForm.reapBatch
                    // for(var i=0;i<this.tableData.length;i++){
                    // this.finishedProductList.push({
                    // 	technologyId: this.technologyId,
                    // 	technology: this.technology,
                    // 	productName: "",
                    // 	batch: yyyyMMdd + Math.ceil(Math.random() * 10000),
                    // 	grade: '',
                    // 	totalNumber: '',
                    // 	surplusNumber: '',
                    // 	units: "",
                    // 	productId: '',
                    // 	title: '',
                    // })
                    // }
                    this.nextStep()

                }
            }

        },
        //下一步
        nextStep() {
            if (this.active++ > 0) {

            }
        },
        handleCurrentChange1(val) {
            this.currentPage1 = val
            this.getProductDetails()
        },

        //选择添加原料弹窗列表的分页
        handleCurrentChange(val) {
            this.currentPage = val
            this.selectMaterial()
        },
        // 上一步
        prev() {
            --this.active
            if (this.active < 0) this.active = 0
            // this.finishedProductList = []

        },
        // 提交
        submitrule() {
            this.$confirm('确定要加工吗?请谨慎操作', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                for (var a = 0; a < this.finishedProductList.length; a++) {
                    if (this.finishedProductList[a].productName == '') {
                        this.$notify.error({
                            title: '提示',
                            message: '成品信息品名不能为空',
                            showClose: false
                        });
                        return
                    }
                    if (this.finishedProductList[a].totalNumber == '') {
                        this.$notify.error({
                            title: '提示',
                            message: '成品信息成品数量不能为空',
                            showClose: false
                        });
                        return
                    }
                }
                //提交前删除imgUrls
                this.technologies.forEach((item,index)=>{
                    item.processImg = item.processImg.replace(this.imageUrls,'')
                })
                let formdata = new FormData
                for (var i = 0; i < this.technologyList.length; i++) {
                    if (this.technologyList[i].files != "" && this.technologyList[i].files != null) {
                        formdata.append("files", this.technologyList[i].files)
                    }
                }
                this.ruleForm.reapId = this.tableData[0].breedId
                this.ruleForm.source = this.source
                this.ruleForm.pmList = JSON.stringify(this.tableData)
                this.ruleForm.pdList = JSON.stringify(this.finishedProductList)
                this.ruleForm.ptList = JSON.stringify(this.technologyList)
                console.log(this.technologyList,'%%%%%%%');
                for (var a in this.ruleForm) {
                    if (this.ruleForm[a] == null || this.ruleForm[a] == "null") {
                        this.ruleForm[a] = ""
                        formdata.append(a, '')
                    } else {
                        formdata.append(a, this.ruleForm[a])
                    }
                }
                editProcess(formdata).then((res) => {
                    this.$notify({
                        title: '提示',
                        message: '成功',
                        type: 'success',
                        duration: 1000
                    });
                    this.$emit('editFinish')
                })
                //    reap_save(formdata).then((res)=>{

                // })
            })
        }
    }
}
</script>

<style lang='less' scoped>
@import "@/assets/css/common.less";
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
    background: #02B386;
}
/deep/.el-tabs__item.is-active {
    color: #1BC46D;
}

/deep/.el-tabs__active-bar {
    background-color: #1BC46D;
}
.el-pagination {
    text-align: right;
}

.addManure {
    border-radius: 8px;
    margin-top: 20px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 16px;
    background: #EBF5FF 100%;
}

.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    width: 180px;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 90px;
    /* height: 178px; */
    line-height: 140px;
    text-align: center;
    color: #1BC46D;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.addManure {
    border-radius: 8px;
    margin-top: 20px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 16px;
    background: rgba(8, 185, 94, 0.08);
    color: #08B95E;
}
</style>
<style lang="less">
.added {
    .el-input .el-input__inner {
        background-color: #FAFAFA !important;
        border: 1px solid #EEEEEE !important;
    }

    .el-textarea__inner {
        background-color: #FAFAFA !important;
        border: 1px solid #EEEEEE !important;
    }
}
</style>
